<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/starbucks.css">
    <title>星巴克</title>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 左侧的用户账户 -->
            <div class="m1 col-lg-5 col-md-12">
                <!-- 头部导航 -->
                <header class="header">
                    <a href="#"><img class="my_logo" src="./img/logo.svg"></a>
                    <a class="my_font ml-3" href="#">门店</a>
                    <a class="my_font ml-3" href="#">我的账户</a>
                    <a class="my_font ml-3" href="#">菜单</a>
                    <a href="#"><img class="my_icon1 mt-1" src="./img/icon-hamburger.svg" alt=""></a>
                </header>
                <!-- 主体部分 -->
                <div class="d-flex align-items-center justify-content-center">
                    <div class="mb-4">
                        <!-- 文字描述 -->
                        <p class="my_desc">心情惬意，来杯咖啡吧 ☕</p>
                        <!-- 登录注册 -->
                        <a href="#">
                            <img src="./img/icon-account.svg" id="login">
                            <label class="my_log" for="login">登录</label>
                        </a>
                        <a class="my_log reg px-2 py-1 ml-3" href="#">注册</a>
                    </div>
                </div>
            </div>

            <!-- 右侧的星巴克介绍 -->
            <div class="m2 col-lg-7 col-md-12">
                <!-- 焦点轮播图 -->
                <div class="carousel" data-ride="carousel" id="demo">
                    <!-- 图片部分 -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="w-100" src="./img/banner1.jpg">
                        </div>
                        <div class="carousel-item">
                            <img class="w-100" src="./img/banner2.jpg">
                        </div>
                    </div>
                    <!-- 右箭头 -->
                    <a class="carousel-control-next" data-slide="next"  href="#demo">
                        <img src="./img/icon-arrow-white.svg" alt="">
                    </a>
                </div>
                <!-- 详情图 -->
                <div class="my_descimg row d-flex justify-content-around no-gutters mt-4">
                    <div class="my_move col-4 text-center">
                        <img class="my_tmall mb-5" src="./img/tmall1.jpg" alt="">
                    </div>
                    <div class="my_move col-4 text-center">
                        <img class="my_tmall mb-5" src="./img/tmall2.jpg" alt="">
                    </div>
                    <div class="my_move col-4 text-center">
                        <img class="my_tmall mb-5" src="./img/tmall3.jpg" alt="">
                    </div>
                </div>
                <!-- 星享俱乐部 -->
                <div class="row mx-5 ">
                    <div class="col-6">
                        <p class="my_font3">星享俱乐部</p>
                        <p class="my_font2 mt-4">
                            开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。
                            <span><a class="know_more"  href="#">了解更多 ›</span>
                        </p>
                        <p class="mt-4">
                            <a class="my_club px-3 py-1 mr-2" href="#">注册</a>
                            <a class="my_club px-3 py-1" href="#">登录</a>
                        </p>
                    </div>
                    <img class="col-6 my_clubimg " src="./img/logo-msr-new.svg" alt="">
                </div>
                <!-- 星巴克精选 -->
                <div class="text-center mt-2">
                    <p class="my_font3">星巴克精选</p>
                    <p class="my_font2">在星巴克天猫旗舰店发现更多咖啡心意</p>
                    <!-- 精选内容 -->
                    <div class="d-flex justify-content-center ">
                        <div class="my_move px-4 mx-3 my_border">
                            <img class="my_choose" src="./img/tmall-card-01.png" alt="">
                            <p class="my_font">会员星礼包</p>
                            <p class="my_font1">
                                星享卡新升级<br>更多新意好礼
                            </p>
                            <p class="know_more mt-4 my_size">了解更多 ›</p>
                        </div>
                        <div class="my_move px-4 mx-3 my_border">
                            <img class="my_choose" src="./img/tmall-card-02.png" alt="">
                            <p class="my_font">星礼卡</p>
                            <p class="my_font1">
                                用一份心礼<br>让心意相随
                            </p>
                            <p class="know_more mt-4 my_size">了解更多 ›</p>
                        </div>
                        <div class="my_move px-4 mx-3  my_border">
                            <img class="my_choose" src="./img/tmall-eticket.png" alt="">
                            <p class="my_font">电子产品券</p>
                            <p class="my_font1">
                                心意<br>从这一杯开始
                            </p>
                            <p class="know_more mt-4 my_size">了解更多 ›</p>
                        </div>
                        <div class="my_move px-4 mx-3  my_border">
                            <img class="my_choose" src="./img/tmall-reserve.png" alt="">
                            <p class="my_font">咖啡生活</p>
                            <p class="my_font1">
                                星巴克<br>用心制作咖啡
                            </p>
                            <p class="know_more mt-4 my_size">了解更多 ›</p>
                        </div>
                    </div>
                </div>

                <!-- 咖啡星讲堂 -->
                <div class="text-center mt-5">
                    <p class="my_font3">1912 派克街 | 咖啡星讲堂</p>
                    <p class="my_font2">了解更多星巴克咖啡文化</p>
                    <!-- 详情图片 -->
                    <div class="d-flex justify-content-between">
                        <div class="my_move">
                            <img class="my_star" src="./img/coffee1.jpg">
                            <p class="pt-2 pb-3 my_desc1">咖啡的起源与培植</p>
                        </div>
                        <div class="my_move mx-2">
                            <img class="my_star" src="./img/coffee2.jpg">
                            <p class="pt-2 pb-3 my_desc1">咖啡的起源与培植</p>
                        </div>
                        <div class="my_move">
                            <img class="my_star" src="./img/coffee3.jpg">
                            <p class="pt-2 pb-3 my_desc1">咖啡的起源与培植</p>
                        </div>
                    </div>
                </div>

                <!-- 备案号 -->
                <p class="text-center">
                    <img src="./img/icpicon.png" alt="">
                    <a class="my_font2" href="#"> 沪公网安备 31010402000253号</a>
                    <span class="my_font2">|</span>
                    <a class="my_font2" href="#">沪ICP备17003747号</a>
                </p>
            </div>
        </div>
    </div>
</body>
</html>